<template>
	<view class="container">
		<!-- 内容部分 -->
		<view class="content">
			<block v-for="(block, index) in processedSections" :key="index">
				<view class="section-block">
					<!-- 标题 -->
					<view v-if="block.title" class="section-title">{{ block.title }}</view>
					<!-- 内容 -->
					<view v-for="(contentItem, contentIndex) in block.contentList" :key="contentIndex"
						class="section-content" v-html="processContent(contentItem.content)"></view>
					<!-- 图片 -->
					<image mode="widthFix" v-if="block.image" :src="block.image" class="section-image" alt="相关图片"
						@click="previewImage(block.image)" />
				</view>
			</block>
			<!-- 添加资料来源链接 -->
			<view v-if="sourceLink" class="source-link">
				<a :href="sourceLink" target="_blank" style="color: #1eadea;">{{ sourceText }}</a>
			</view>
			<!-- 返回按钮 -->
			<button @tap="goBack" class="back-button" style="margin-top: 20px;">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['sections', 'sourceLink', 'sourceText', 'processContent'],
		data() {
			return {
				processedSections: []
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
				});
			},
			processSections() {
				const processedSections = [];
				let currentBlock = null;

				this.sections.forEach(section => {
					if (section.title) {
						if (currentBlock) {
							processedSections.push(currentBlock);
						}
						currentBlock = {
							title: section.title,
							contentList: [],
							image: null
						};
					}

					if (section.content) {
						currentBlock.contentList.push(section);
					}

					if (section.image) {
						currentBlock.image = section.image;
					}
				});

				if (currentBlock) {
					processedSections.push(currentBlock);
				}

				this.processedSections = processedSections;
			},
			previewImage(currentImg) {
				const imgList = this.processedSections.filter(section => section.image).map(section => section.image);
				uni.previewImage({
					current: currentImg, // 当前显示图片的链接
					urls: imgList // 需要预览的图片链接列表
				});
			}
		},
		mounted() {
			this.processSections();
		}
	};
</script>

<style scoped>
	/* 设置全局样式 */
	.container {
		background: url('https://bpic.588ku.com/illus_water_img/21/01/20/6e9d51c69be8b2edb5d0fd64aafeac69.jpg!/fw/750/quality/99/unsharp/true/compress/true') no-repeat center center fixed;
		background-size: cover;
		height: 100vh;
		/* 确保容器高度覆盖整个视窗 */
		box-sizing: border-box;
		/* 确保padding和border包含在元素的总大小内 */
		overflow-y: auto;
		/* 允许垂直滚动 */
	}

	.content {
		padding: 15px;
		position: relative;
		z-index: 1;
		color: #fff;
		/* 确保文字颜色为白色或其他浅色，以便于阅读 */
	}

	.section-block {
		background-color: rgba(36, 36, 68, 0.4);
		/* 设置内容块的背景颜色，带有一定的透明度 */
		backdrop-filter: blur(10px);
		/* 添加磨砂效果 */
		border-radius: 10px;
		/* 圆角 */
		margin-bottom: 20px;
		/* 每个内容块之间的间距 */
		padding: 15px;
		/* 内容块内的内边距 */
	}

	/* 其他样式保持不变 */
	.title {
		text-align: center;
		font-size: 24px;
		margin-bottom: 0px;
	}

	.section-title {
		font-size: 25px;
		margin-top: 0px;
		color: #b87412;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.section-content {
		font-size: 18px;
		display: block;
		text-indent: 2em;
		line-height: 27px;
	}

	.section-image {
		width: 100%;
		height: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.source-link a {
		color: #b87412;
		text-decoration: none;
		font-size: 16px;
		display: block;
		margin-top: 20px;
	}
</style>